<template>
  <div class="login">
    <!--组件-->
    <component :is="curCom.com">
      <el-divider content-position="center">其他登录方式</el-divider>
      <div style="text-align: center">
        <el-image
          class="login-other-icon"
          v-for="c in comList"
          :src="c.img"
          :name="c.name"
          :key="c.name"
          :title="c.title"
          v-if="c.name !== curCom.name"
          @click="changeCom(c)"
        >
          <div slot="error" class="image-slot">
            {{ c.name }}
          </div>
        </el-image>
      </div>
    </component>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © sddigitech.com All Rights Reserved.</span>
    </div>
  </div>
</template>

<script>
import "@/assets/styles/login.scss";

//注册目录下所有表单
const comFiles = require.context("./loginForms", false, /loginform-.*\.vue$/);
let components = {};
comFiles.keys().forEach((fileName) => {
  components[fileName.replace(/^\.\/(.*)\.\w+$/, "$1")] =
    comFiles(fileName).default;
});
export default {
  name: "Login",
  components: components,
  data() {
    let comList = [
      {
        name: "LoginFormUsername",
        title: "用户名密码登录",
        com: components["loginform-username"],
        img: require("@/assets/images/login/user.png"),
      },
      {
        name: "LoginFormPhoneCode",
        title: "手机号验证码登录",
        com: components["loginform-phonecode"],
        img: require("@/assets/images/login/phone.png"),
      },
    ];

    return {
      ready: false,
      title: process.env.VUE_APP_TITLE || "[[数研脚手架]]系统",
      wechatEnable: false,
      curCom: comList[0],
      comList: comList,
    };
  },
  mounted() {
    //是否启用微信登录
    this.getConfigKey("sys.account.wechatOnOff").then((res) => {
      let wechatEnable = res.msg == "true";
      this.wechatEnable = wechatEnable;
      if (wechatEnable) {
        this.comList.push(
          {
            name: "LoginFormWechatCode",
            title: "微信验证码登录",
            com: components["loginform-wechatcode"],
            img: require("@/assets/images/login/wechatcode.png"),
          },
          {
            name: "LoginFormWechatScan",
            title: "微信扫码登录",
            com: components["loginform-wechatscan"],
            img: require("@/assets/images/login/wechatscan.png"),
          }
        );
      }
    });
  },
  methods: {
    //切换登录方式
    changeCom(com) {
      this.curCom = com;
    },
  },
};
</script>
